<template>
    <div style="height: 50px;border-bottom: 1px solid #ccc; display: flex">
        <div style="width: 200px; padding-left: 40px; padding-top: 10px; font-weight: bold; color: dodgerblue; font-size: 19px">房屋出租系统</div>
        <div style="flex: 1"></div>
        <div style="padding-top: 10px; padding-right: 30px">
            <el-badge :value="this.messageCount" :max="99" class="item">
                <el-button size="small" @click="gotoMeeting">消息</el-button>
            </el-badge>
        </div>
        <div style="width: 100px; margin-right: 2rem; padding-top: 15px">
            <el-dropdown>
            <span class="el-dropdown-link" style="font-size: 15px">
              {{user.name}}<i class="mdui-icon material-icons" style="font-size: 20px">expand_more</i>
            </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="$router.push('/person')">个人信息</el-dropdown-item>
                        <el-dropdown-item @click="$router.push('/login')">退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script>
    import request from "@/utils/request";

    export default {
        name: "Header",
        data(){
            return{
                user:{},
                messageCount: 0,  //定义消息的显示
            }
        },
        created(){
            let ownerStr = sessionStorage.getItem("user") || "{}";
            this.user = JSON.parse(ownerStr);
            if (this.user.role === 1) {
                request.get("/meeting/selectOwnerCount/" + this.user.id)
                    .then(res => {
                    this.messageCount = res;
                })
            }
            if (this.user.role === 2) {
                request.get("/meeting/selectTenantCount/" + this.user.id)
                    .then(res => {
                    this.messageCount = res;
                })
            }
        },
        methods: {
            gotoMeeting() {
                this.$router.push("/meeting/");  //点击后跳转到会面信息页面
            }
        }
    }
</script>

<style>

</style>